<template>
  <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
    <n-grid-item>
      <n-space justify="center" >
        <n-upload
          :action="`${global.urlPrefix}/user/avatar`"
          :headers="headers"
          :default-upload="true"
          :show-file-list="false"
          @before-upload="beforeUpload"
          @finish="finish"
        >
          <n-avatar
            round
            :size="100"
            :src="`${global.urlPrefix}${userInfo.avatar}`"
          />
        </n-upload>
      </n-space>
      <n-space justify="space-between">
        <span>
          <n-icon>
            <Person />
          </n-icon>
          用户名
        </span>
        <span>{{ userInfo.username }}</span>
      </n-space>
      <n-divider />
      <n-space justify="space-between">
        <span>
          <n-icon>
            <NavigateCircle />
          </n-icon>
          昵称
        </span>
          <span>{{ userInfo.nickName }}</span>
      </n-space>
      <n-divider />
      <n-space justify="space-between">
        <span>
          <n-icon>
            <PhonePortraitOutline />
          </n-icon>
          手机号码
        </span>
        <span>{{ userInfo.telephone || "暂无绑定" }}</span>
      </n-space>
      <n-divider />
      <n-space justify="space-between">
        <span>
          <n-icon>
            <Mail />
          </n-icon>
          电子邮箱
        </span>
        <span>{{ userInfo.email || "暂无绑定" }}</span>
      </n-space>
      <n-divider />
      <n-space justify="space-between">
        <span>
          <n-icon>
            <Timer />
          </n-icon>
          注册时间
        </span>
        <span>{{ userInfo.createTime }}</span>
      </n-space>
    </n-grid-item>
  </n-grid>

</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import {UploadFileInfo, useMessage} from 'naive-ui';
import { useUserStore } from "@/store/modules/user";
import { Person, PhonePortraitOutline, Mail, Timer, NavigateCircle } from '@vicons/ionicons5'
import { AuthEnum } from "@/enums/httpEnum";
import { getUserInfo } from "@/api/authority/user";
import { useGlobSetting } from "@/hooks/setting";

const userStore = useUserStore()
const message = useMessage()
const global = useGlobSetting()

const userInfo = ref(userStore.getUserInfo)
const headers = {}
const fileTypes = ref([
  'image/png',
  'image/jpeg'
])

const beforeUpload = async (data: {
  file: UploadFileInfo
  fileList: UploadFileInfo[]
}) => {
  for (const fileType of fileTypes.value) {
    if (data.file.file?.type === fileType) {
      return true
    }
  }
  message.error(`只能上传[${fileTypes.value.toString()}]格式的图片文件，请重新上传`)
  return false
}

// 文件上传过后，需要重新获取用户的头像信息
const finish = async (options: {
  file: UploadFileInfo,
  event?: ProgressEvent
}) => {
  const info = await getUserInfo()
  userStore.setUserInfo(info)
  userInfo.value = info
  message.success('修改成功')
  return options.file
}


onMounted(() => {
  userInfo.value = userStore.getUserInfo
  headers[AuthEnum.AUTH_TOKEN_HEADER] = `${AuthEnum.AUTH_TOKEN_SCHEME} ${userStore.getToken}`
})


</script>

<style lang="less" scoped>
.n-divider:not(.n-divider--vertical) {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
